<template>
	<div class="list">
		<div class="item" 
			v-for="item of letters" 
			:key="item"
			:ref="item"
			@click="handleLetterClick"
			@touchstart="handleTouchStart"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
			>{{item}}</div>
	</div>
</template>

<script>
export default{
  name:'CityAlphabet',
  props:{
  	cities:Object
  },
  data(){
  	return{
  		touchStatus:false,
  		startY:0,
  		timer:null
  	}
  },
  updated(){
  	this.startY=this.$refs['A'][0].offsetTop
  },
  computed:{
  	letters(){
  		const letters=[]
  		for(let i in this.cities){
  			letters.push(i)
  		}
  		return letters
  	}
  },
  methods:{
  	handleLetterClick(e){
  		this.$emit('change',e.target.innerText)
  	},
  	handleTouchStart (){
  		this.touchStatus=true
  	},
  	handleTouchMove(e){
  		if(this.touchStatus){
  			if(this.timer){
  				clearTimeout(this.timer)
  			}
  			this.timer=setTimeout(()=>{
  				const touchY=e.touches[0].clientY-79
  				const index=Math.floor((touchY-this.startY)/20)
  				if(index>=0&&index<this.letters.length){
  					this.$emit('change',this.letters[index])
  				}
  			},16)
  		}
  	},
  	handleTouchEnd(){
  		this.touchStatus=false
  	}
  }
}
</script>

<style lang="stylus" scoped>
.list
  position:absolute
  display:flex
  flex-direction:column
  justify-content:center
  top:1.58rem
  right:0
  bottom:0
  width:.4rem
  .item
    text-align:center
    line-height:.4rem
    color:#00bcd4
</style>